<template>
    <div class="main">
        <el-tabs v-model="tabsValue" @tab-click="handleClick">
            <el-tab-pane label=分组 name="groups">
                <section>
                    <div v-if="rightsButtons['add']" class="btn-block">
                        <el-button type="success" size="small" icon="el-icon-circle-plus" plain @click="addShow('groups')">新建分组</el-button>
                    </div>
                    <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="96px">
                        <el-row :gutter="50">
                            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                                <el-form-item label="名称：" prop="name">
                                <el-input v-model="listQuery.name" placeholder="请输入分组名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="" class="btn-item">
                            <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                            <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                        </el-form-item>
                    </el-form>
                    <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                        <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                        <el-table-column align="center" label="分组名称" prop="name"></el-table-column>
                        <el-table-column align="center" label="所属频道" prop="channelId">
                            <template slot-scope="scope">
                              <span>{{scope.row.channelId===1?'素材':scope.row.channelId===2?'商学院':scope.row.channelId===3?'进阶学习':'邀请海报'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="分组排序" prop="sort"></el-table-column>
                        <el-table-column align="center" label="上传时间" prop="createdAt"></el-table-column>
                        <el-table-column align="center" label="操作" width="200" v-if="rightsButtons['edit'] || rightsButtons['delete']">
                            <template slot-scope="scope">
                                <el-button v-if="rightsButtons['edit']" type="primary" size="mini"  @click="editShow('groups',scope.row.id)" >编辑</el-button>
                                <el-button v-if="rightsButtons['delete']" type="delete" size="mini" @click="deleteGroup(scope.row.id)" >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="listQuery.pageNum"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="listQuery.pageSize"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listTotal">
                    </el-pagination>
                </section>
            </el-tab-pane>
            <el-tab-pane label="标签" name="tags">
                <section>
                    <div v-if="rightsButtons['tagAdd']" class="btn-block">
                        <el-button type="success" size="small" icon="el-icon-circle-plus" plain  @click="addShow('tags')">新建标签</el-button>
                    </div>
                    <el-form ref="searchForm2" class="search-block" :model="listQuery2" label-position="right" label-width="96px">
                        <el-row :gutter="50">
                            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                                <el-form-item label="名称：" prop="name">
                                    <el-input v-model="listQuery2.name" placeholder="请输入标签名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="" class="btn-item">
                            <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                            <span class="btn-reset" @click="resetForm('searchForm2')">清空搜索条件</span>
                        </el-form-item>
                    </el-form>
                    <el-table :data="list2" v-loading="listLoading2" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                        <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                        <el-table-column align="center" label="标签名称" prop="name"></el-table-column>
                        <el-table-column align="center" label="所属分组" prop="groupName"></el-table-column>
                        <el-table-column align="center" label="标签排序" prop="sort"></el-table-column>
                        <el-table-column align="center" label="创建时间" prop="createdAt"></el-table-column>
                        <el-table-column align="center" label="操作" width="200" v-if="rightsButtons['tagEdit'] || rightsButtons['tagDelete']">
                            <template slot-scope="scope">
                                <el-button v-if="rightsButtons['tagEdit']" type="primary" size="mini" @click="editShow('tags',scope.row.id)" >编辑</el-button>
                                <el-button v-if="rightsButtons['tagDelete']" type="delete" size="mini" @click="deleteGroup(scope.row.id)" >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="listQuery2.pageNum"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="listQuery2.pageSize"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listTotal2">
                    </el-pagination>
                </section>
            </el-tab-pane>
        </el-tabs>   
        <el-dialog  :visible.sync="dialogFormVisible" :title="groupOrTag==='groups' ? '分组' : '标签'">
            <el-form :model="formData" :rules="commonRules" size="medium" ref="form" label-width="120px">
                <el-form-item label="分组名称:" prop="group.name" :rules="commonRules.notNullRule" v-if="groupOrTag==='groups'" >
                    <el-input v-model="formData.group.name" placeholder="请输入分组名称，最多5个字" maxlength="5"></el-input>
                </el-form-item>
                <el-form-item label="所属频道:" prop="group.channelId" :rules="commonRules.notNullRule" v-if="groupOrTag==='groups'" >
                    <el-radio-group v-model="formData.group.channelId" :disabled="formData.group.id ? true : false">
                        <el-radio :label="1">素材圈</el-radio>
                        <el-radio :label="2">商学院</el-radio>
                        <el-radio :label="3">进阶学习</el-radio>
                        <el-radio :label="4">邀请海报</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="APP是否显示:"  prop="group.appShow" :rules="commonRules.notNullRule" v-if="groupOrTag==='groups'" >
                    <el-switch
                        v-model="formData.group.appShow"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0"
                        active-text="是"
                        inactive-text="否"
                        >
                    </el-switch>
                </el-form-item>
                <el-form-item label="分组排序:"  prop="group.sort" :rules="commonRules.numberRule" v-if="groupOrTag==='groups'" >
                    <el-input  v-model="formData.group.sort" placeholder="数字越大越靠前">
                            <template slot="append">已排序至{{groupSort}}</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="标签名称:" prop="tag.name" :rules="commonRules.notNullRule" v-if="groupOrTag==='tags'" >
                    <el-input v-model="formData.tag.name" placeholder="请输入标签名称，最多5个字" maxlength="5"></el-input>
                </el-form-item>
                <el-form-item label="所属分组:" prop="tag.groupId" :rules="commonRules.notNullRule" v-if="groupOrTag==='tags'" >
                    <el-row justify="space-between" type="flex">
                        <el-col :span="16">
                            <el-select v-model="formData.tag.groupId" placeholder="请选择">
                                <el-option :value="group.id" :label="group.name" v-for="(group,index) in groupList" :key="index"></el-option>
                            </el-select>
                        </el-col>   
                        <el-col :span="6">
                            <el-button icon="el-icon-plus" @click="addGroup('groups')">添加分组</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="APP是否显示:"  prop="tag.appShow" :rules="commonRules.notNullRule" v-if="groupOrTag==='tags'" >
                    <el-switch
                        v-model="formData.tag.appShow"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0"
                        active-text="是"
                        inactive-text="否"
                        >
                    </el-switch>
                </el-form-item>
                <el-form-item label="标签排序:" prop="tag.sort" :rules="commonRules.numberRule" v-if="groupOrTag==='tags'" >
                    <el-input  v-model="formData.tag.sort" placeholder="数字越大越靠前">
                        <template slot="append">已排序至{{tagSort}}</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save()" :loading="btnLoading" :disabled="btnLoading">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'commercialGroup',
        data(){
            return {
                listQuery: {
                    pageNum: 1,
                    pageSize: 10,
                    name:''
                },
                listQuery2: {
                    pageNum: 1,
                    pageSize: 10,
                    name:''
                },
                rangeTime:[],
                listLoading: false,
                list: [],
                listTotal: 0,
                listLoading2: false,
                list2: [],
                listTotal2: 0,
                btnLoading: false,
                tabsValue: 'groups',
                dialogFormVisible:false,
                formData:{
                    group:{
                        name:'',
                        channelId:1,
                        sort:'',
                        id:'',
                        appShow: 0
                    },
                    tag:{
                        name:'',
                        groupId:'',
                        sort:'',
                        id:'',
                        appShow: 0
                    }     
                },
                //是分组还是标签
                groupOrTag:'',
                groupSort:'',
                tagSort:'',
                groupList:[],
                //是否是从标签的那里来的新建分组
                isOrTagAddGroup: false
            }
        },
        created(){
            this.getList()
            this.getGroupSort()
            this.getTagSort()
            this.getGroup()
        },
        methods: {
            // 搜索
            search() {
                if(this.tabsValue==='groups') {
                    this.listQuery.pageNum = 1
                } else {
                    this.listQuery2.pageNum = 1
                }
                this.getList()
            },
            save() {
                this.$refs.form.validate(valid => {
                    if(valid) {
                        this.btnLoading = true
                        let saveUrl =  this.groupOrTag ==='groups'? '/bus-group/save' :'/bus-tag/save'
                        let saveData = this.groupOrTag ==='groups'? {
                                name: this.formData.group.name,
                                channelId: this.formData.group.channelId,
                                sort: this.formData.group.sort,
                                id: this.formData.group.id,
                                appShow: this.formData.group.appShow} : {
                                    name: this.formData.tag.name,
                                    groupId: this.formData.tag.groupId,
                                    sort: this.formData.tag.sort,
                                    id: this.formData.tag.id,
                                    appShow: this.formData.tag.appShow
                                }       
                        this.request({
                            url: saveUrl,
                            method: 'post',
                            data: saveData
                        }).then((res)=>{
                            this.$message.success(res.msg)
                            if(this.isOrTagAddGroup) {
                                if(this.formData.tag.id) {
                                    this.editShow('tags', this.formData.tag.id)
                                    this.getGroup()
                                } else {
                                    this.addShow('tags')
                                    this.getGroup()
                                }
                                this.isOrTagAddGroup = false
                            } else {
                                this.dialogFormVisible = false
                                this.getList()
                            }
                        }).catch((err)=>{
                            this.btnLoading = false
                            console.log(err)
                        })
                    }
                })   
            },
            cancel() {
                this.dialogFormVisible = false
                this.isOrTagAddGroup = false
            },
            addGroup(type){
                this.isOrTagAddGroup = true
                this.addShow('groups')
            },
            addShow(type) {
                this.groupOrTag = type
                if(type==='groups'){
                    this.getGroupSort()
                        this.formData.group = {
                            name:'',
                            channelId:1,
                            sort:'',
                            id:'',
                            appShow: 0
                        }
                        this.$nextTick(()=>{
                            this.$refs.form.clearValidate()
                        })  
                } else {
                    this.getTagSort()
                    this.getGroup()
                    if(!this.isOrTagAddGroup){
                        this.formData.tag = {
                            name:'',
                            groupId:'',
                            sort:'',
                            id:'',
                            appShow: 0
                        }
                        this.$nextTick(()=>{
                            this.$refs.form.clearValidate()
                        })
                    }
                }
                this.btnLoading = false
                this.dialogFormVisible = true
            },
            editShow(type, id) {
                this.groupOrTag = type
                this.btnLoading = false
                this.dialogFormVisible = true
                this.getTagSort()
                this.getGroupSort()
                let getURL = type==='groups'?'/bus-group/get':'/bus-tag/get'
                this.request({
                    url: getURL+'?id='+id,
                    method: 'get'
                }).then((res) =>{
                    if(type==='groups'){
                        this.formData.group = {
                            ...res.data
                        }
                    }else {
                         this.formData.tag = {
                            ...res.data
                        }
                    }
                })
            },
            getList(){
                this.listLoading = true
                let urlG = ''
                if(this.tabsValue==='groups') {
                    urlG = '/bus-group/search'
                } else {
                    urlG = '/bus-tag/search'
                }
                this.request({
                    url: urlG,
                    method: 'post',
                    data: this.tabsValue==='groups'? this.listQuery : this.listQuery2
                }).then((res) => {
                    if(this.tabsValue==='groups'){
                        this.list = res.data.list
                        this.listTotal = res.data.total
                        this.listLoading = false
                    }else{
                        this.list2 = res.data.list
                        this.listTotal2 = res.data.total
                        this.listLoading2 = false
                    }   
                }).catch(err => {
                     if(this.tabsValue==='groups'){
                        this.list = []
                        this.listTotal = 0
                        this.listLoading = false
                    }else{
                        this.list2 = []
                        this.listTotal2 = 0
                        this.listLoading2 = false
                    } 
                })
            },
            handleSizeChange (value) {
                if(this.tabsValue==='groups'){
                    this.listQuery.pageSize = value
                } else {
                    this.listQuery2.pageSize = value
                } 
                this.getList()
            },
            handleCurrentChange(val){
                if(this.tabsValue==='groups'){
                    this.listQuery.pageNum = val
                } else {
                    this.listQuery2.pageNum = val
                } 
                this.getList()
            },
            handleClick() {
                this.getList()
            },
            // 清空搜索条件
            resetForm (formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
            deleteGroup(id){
                this.$confirm('删除操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let  delUrl = ''
                    if(this.tabsValue==='groups') {
                        delUrl = '/bus-group/delete'
                    } else {
                        delUrl = '/bus-tag/delete'
                    }
                    this.request({
                        url: delUrl + '?id='+ id,
                        method: 'delete',
                    }).then((res) => {
                       if(res.code===200){
                           this.$message.success(res.msg)
                           this.getList()
                       } 
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })         
                })  
            },
            async getGroupSort() {
                const groupSort = await this.request({
                    url: '/bus-group/sort-last',
                    method: 'get'
                }).catch((err)=> {
                    this.$message.error(err.msg)
                }) 
                if(groupSort.code===200){
                this.groupSort = groupSort.data
                }
            },
            async getTagSort() {
                const tagSort = await this.request({
                    url: '/bus-tag/sort-last',
                    method: 'get'
                }).catch((err)=> {
                    this.$message.error(err.msg)
                }) 
                if(tagSort.code===200){
                this.tagSort = tagSort.data
                }
            },
            async getGroup() {
                const group = await this.request({
                    url: '/bus-group/list?channelId=1',
                    method: 'get',
                }).catch((err)=> {
                    this.$message.error(err.msg)
                }) 
                if(group.code===200){
                    this.groupList = group.data
                }
            }
        }
    }
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .banner-container{
        .avatar-uploader .el-upload{
            width: 120px;
            height: 120px;
            line-height: 118px;
        }
    }
    .activity-img{
        @include flex;
        @include center;
        min-height: 60px;
        img{
            width:100%;
            height: 100%;
            max-width: 60px;
            max-height: 60px;
        }
    }
    .el-row{
        margin-bottom: 12px;
    }
</style>
